<template>
  <div class="padded-top">
    <navigation>{{ $t('挖矿套餐') }}</navigation>
    <div v-if="list.length>0" class="list">
      <div v-for="item in list" :key="item.id" class="list-item">
        <div class="bd">
          <img :src="downPath + item.icon" alt="" class="pic">
          <div class="txt">
            <p class="name">{{ $t(item.name) }}</p>
            <p>{{ $t('价格') }}：<span>{{ Number(item.min_num).toFixed(0) }} {{ item.coin_symbol }}</span></p>
            <!-- <p>{{ $t('日产量') }}：<span>{{ $t('当日价值') }}{{ item.day_profit }}{{ item.coin_symbol }}{{ $t('的') }}{{ overview.coin_symbol }}{{ $t('数量') }}</span></p> -->
            <p>{{ $t('日产量') }}：<!-- <span>挖矿</span> -->{{ item.coin_symbol }}售价×1%÷当日{{ overview.coin_symbol }}价格</span></p>
            <p>{{ $t('剩余寿命') }}：<span>{{ item.period }}{{ $t('天') }}</span></p>
          </div>
        </div>
        <div class="hd">
          <div class="left">
            {{ $t('选择使用币种') }}：
            <span>{{ Number(item.amount).toFixed(5) }}</span>
            <select v-model="item.coin_symbol2" class="select" @change="calcAmount(item)">
              <option value="USDT" selected hidden>USDT</option>
              <option v-for="coin in balance" :key="coin.name" :value="coin.name">{{ coin.name }}</option>
            </select>
            <p class="tip">{{ $t('请下拉选择任意币种根据时价折算') }}{{ item.coin_symbol }}{{ $t('兑换') }}</p>
          </div>
          <div class="right">
            <a class="btn" @click="handerWeathBuyPackage(item.id)">{{ $t('兑换') }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      loading: false,
      list: [],
      balance: []
    }
  },
  computed: {
    ...mapState({
      downPath: ({ imgBaseUrl }) => imgBaseUrl,
      auth: ({ auth }) => auth,
      overview: ({ weath }) => weath.overview
    })
  },
  mounted () {
    this.getExchangeBalance()
      .then((data) => {
        this.balance = data.list
      })
    this.handerWeathPackage()
  },
  methods: {
    ...mapActions({
      weathPackage: 'weath/weathPackage',
      weathBuyPackage: 'weath/weathBuyPackage',
      getExchangeBalance: 'fund/getExchangeBalance'
    }),

    handerWeathPackage () {
      this.weathPackage()
        .then((data) => {
          for (let i = 0; i < data.data.length; i++) {
            data.data[i].coin_symbol2 = data.data[i].coin_symbol
            data.data[i].amount = data.data[i].min_num
          }
          this.list = data.data
        })
    },
    handerWeathBuyPackage (id) {
      if (!this.auth.loggedIn) {
        this.$router.push('/login')
        return
      }
      const item = this.list.find((item) => {
        if (item.id === id) {
          return item
        }
        return false
      })
      if (!item) { return }
      const payload = {
        id,
        num: item.min_num,
        coin_symbol: item.coin_symbol2
      }
      if (this.loading) { return }
      this.loading = true
      this.weathBuyPackage(payload)
        .then((data) => {
          this.$toast.success(data.message)
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
    calcAmount (info) {
      const calcItem = this.balance.find((item) => {
        if (item.name === info.coin_symbol2) {
          return item
        }
      })
      info.amount = info.min_num / calcItem.exchange_rate_usd
    }
  }
}
</script>

<style scoped>
.padded-top {
  padding-top: 90px;
}
.list {
  height: calc(100vh - 90px);
  overflow-y: auto;
}
.list-item {
  margin-bottom: 15px;
  box-shadow: 0 0 15px -5px rgba(0, 0, 0, .1);
}
.list-item .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f6f6f6;
  padding: 0 15px;height: 40px;
}
.list-item .name {font-weight: 500;font-size: 14px;}
.list-item .btn {font-size: 12px;background-color: #00acf4;color: #ffffff;padding: 5px 10px;border-radius: 5px;}
.list-item .bd {
  padding: 10px 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.list-item .pic {
  width: 120px;margin-right: 10px;
}
.list-item .txt span {
  font-size: 10px;
  color: #00acf4;
}
.list-item .select {
  appearance: none;
  padding-right: 15px;text-align: right;
  background: url('../../assets/images/icon_arrow_down_x2.png') no-repeat right center/ 10px auto;
}
.list-item .tip {font-size: 10px;color: #999999;}
</style>
